<template>
  <div>
    <el-container>
      <el-aside width="270px">
        <router-link to="/index">
          <img src="../assets/shui.png" style="width: 180px; height: 90px; background-color: skyblue;">
        </router-link>
        <el-menu default-active="1" class="el-menu-vertical-demo">
          <el-submenu :index="index + 1 + ''" v-for="(menu, index) in menuList" :key="menu.id">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>{{ menu.permname }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :index="(index + 1) + '-' + (index2 + 1)" v-for="(child, index2) in menu.children" :key="child.id">
                <router-link :to="child.link">{{ child.permname }}</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <el-card shadow="always">
            <el-row class="mainhead">
              <el-col :span="10" style="text-align: left;">
                <div class="sw">
                  <el-avatar><img src="../assets/sw.png"></el-avatar>
                  <span style="font-size: 22px;color:#019BA0;">智慧水务调度平台</span>
                </div>
              </el-col>
              <el-col :span="14" style="text-align: right;">
                <div style="width:650px;color:#019BA0;">欢迎您：{{ user.name }}，<a href="#" @click="logout()">退出登录</a></div>
                <div class="userimg">
                  <el-button @click="drawer = true" type="text">
                    <el-avatar style="width:80px;height:70px;"><img src="../assets/admin.gif"></el-avatar>
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-drawer :with-header="false" :visible.sync="drawer" :direction="direction" style="height:200px;text-align: right;">
            <el-button type="text" style="margin-right:30px;margin-top: 10px;" @click="logout()">退出登录</el-button>
          </el-drawer>
          <router-view style="margin: 20px;" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
export default {
  data() {
    return {
      direction: 'ttb',
      drawer: false,
      menuList: [],
      user: {}
    }
  },
  methods: {
    logout() {
      this.$axios.post("/user/logout")
        .then((result) => {
          if (result.data.code == 200) {
            this.$message({
              type: 'success',
              message: result.data.message
            });
            localStorage.removeItem('user');
            setTimeout(() => {
              this.$router.push("/login");
            }, 1000);
          } else {
            this.$message.error(result.data.message);
          }
        }).catch((err) => {
          console.log(err);
        })
    }
  },
  mounted() {
    this.user = JSON.parse(localStorage.getItem('user'));
    this.$axios.get("/role/selectByUid?id=" + this.user.id)
      .then((result) => {
        if (result.data.code == 200) {
          this.menuList = result.data.data;
        }
      }).catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style>
* {
  text-decoration: none;
}

body {
  margin: 0;
  padding: 0;
}

.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 58px;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.mainhead {
  background-color: #ffffff;
}

.el-card {
  padding: 0;
  margin: 0;
  height: 60px;
}

.userimg {
  margin-top: -55px;
  margin-right: 10px;
}

.sw {
  margin-top: -10px;
  margin-right: 30px;
}

.el-aside {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #333;
  text-align: center;
  height: 800px;
}

.el-main {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #333;
}

.el-submenu {
  margin-left: -20px;
  width: 240px;
}

.el-menu-item {
  margin-left: 37px;
}

.is-active {
  font-size: 18px;
  /* background-color: lavender; */
}
</style>